<template>
    <div class="user-password-manage">
        <ul class="menu-list">
            <li class="menu__item" @click='show_login_password_auth = true'>
                <p>修改登录密码</p>
                <i class='iconfont icon-arrow'></i>
            </li>
            <li class="menu__item" @click='updateTradePassword' :class="{'no-set':!hasTradePassword}">
                <p>修改交易密码</p>
                <span v-show='!hasTradePassword'>不可用</span>
                <i class='iconfont icon-arrow'></i>
            </li>
        </ul>


        <modal 
            class="modal-password-auth"
            :show='show_login_password_auth'
            :maskClose='false'
            closeButton
            mode='bottom'
            @close='show_login_password_auth = false'>
            <div class="modal-password-auth__box">
                <p class="modal-password-auth__title">请先验证登录密码</p>
                <div class="modal-password-auth__input">
                    <input v-model='loginPassword' type="password" placeholder="登录密码">
                </div>
                <div class="modal-password-auth__button">
                    <span class="button short pure--black" @click='goUserPasswordFindLogin'>忘记密码</span>
                    <span class="button short" @click='checkLoginPassword'>确定</span>
                </div>
            </div>
        </modal>

        <modal 
            class="modal-password-auth"
            :show='show_transaction_password_auth'
            :maskClose='false'
            closeButton
            mode='bottom'
            @close='show_transaction_password_auth = false'>
            <div class="modal-password-auth__box">
                <p class="modal-password-auth__title">请先验证交易密码</p>
                <div class="modal-password-auth__input">
                    <input v-model='transactionPassword' type="password" placeholder="交易密码">
                </div>
                <div class="modal-password-auth__button">
                    <span class="button short pure--black" @click='goUserPasswordFindTransaction'>忘记密码</span>
                    <span class="button short" @click='checkTransactionPassword'>确定</span>
                </div>
            </div>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { userApi, allApi, lenderApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,tabBox,
            tab
        },
        data() {
            return {
                tabIndex:0,
                show_login_password_auth:false,
                show_transaction_password_auth:false,
                loginPassword:'',
                transactionPassword:'',
                payways:[{
                    value:0,
                    display:'还款方式1'
                },{
                    value:1,
                    display:'还款方式2'
                },{
                    value:2,
                    display:'还款方式3'
                }],
                rechargeMoney:'',
                show_modal_loan_detail:false,
                argeement:true,
                payway:-1,
                showDetail:false,
                payPasswordShow:false,
                hasTradePassword:false,
                payStatus:'',
                password:'',
                placeholder:'--',
                userCount:'',
                listInfo:{},
                records:[],
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setLoginPassword',
                'setTransactionPassword'
            ]),

            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function

            // function
            goRouter(name){
                this.$router.push({
                    name:name
                })
            },
            resetLoginPassword(){
                this.show_login_password_auth = true
            },
            checkLoginPassword(){
                this.showLoading()
                userApi.checkLoginPassword({
                    oldPassword:this.loginPassword
                })
                .then(result=>{
                    this.hideLoading()
                    if(result.right == true){
                        this.setLoginPassword(this.loginPassword)
                        this.$router.push({
                            name:'user-password-set-login'
                        })
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            checkTransactionPassword(){
                this.showLoading()
                userApi.checkTradePassword({
                    oldPassword:this.transactionPassword
                })
                .then(result=>{
                    this.hideLoading()
                    if(result.right == true){
                        this.setTransactionPassword(this.transactionPassword)
                        this.$router.push({
                            name:'user-password-set-transaction'
                        })
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            updateTradePassword(){
                if(!this.hasTradePassword){
                    this.$router.push({
                        name:'user-bind-card-transaction-password'
                    })
                }
                else{
                    this.show_transaction_password_auth = true
                }
            },
            goUserBindCardTransactionPassword(){
                this.$router.push({
                    name:'user-bind-card-transaction-password'
                })
            },
            goUserPasswordFindLogin(){
                this.$router.push({
                    name:'user-password-find-login'
                })
            },
            goUserPasswordFindTransaction(){
                this.$router.push({
                    name:'user-password-find-transaction'
                })
            },
            goSuccess(){
                this.$router.push({
                    name:'loan-in-success'
                })
            },
            withDrawAll(){
                this.withDrawMoney = 600
            },
            test(){
                console.log(1)
            },
            goPay(){
                this.payStatus = true
                console.log(1)
            },
            hadSetTradePassword(){
                this.showLoading()
                userApi.hadSetTradePassword()
                .then(result=>{
                    this.hasTradePassword = result
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
        },
        created(){
            this.hadSetTradePassword()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-password-manage{
        .menu__item.no-set{
            color:$grayLight;
            p{
                color:$grayLight;
            }
        }
        .tips{
            @extend %font-caption;
            padding: 8px 24px;
        }
        .form-box{
            margin-top: 0;
            margin-bottom: 16px;
            &:last-child{
                margin-bottom: 8px;
            }
        }
        .modal-password-auth{
            .component-modal__main{
                padding-left:16px;
                padding-right:16px;
            }
        }
        .modal-password-auth__title{
            @extend %font-title;
            color:$importColor;
            text-align: center;
        }
        .modal-password-auth__input{
            padding: 24px 0;
            input{
                @extend %font-subhead;
                width: 100%;
                box-sizing: border-box;
                padding:14px 16px;
                background-color: $backgroundColor;
                border: 1px solid $sectionColor;
            }
        }
        .modal-password-auth__button{
            display: flex;
            justify-content: flex-end;
            .button{
                margin-left:16px;
                &:first-child{
                    margin-left: 0;
                }
            }
        }
    }

</style>
